<template>
  <div class="BasicInformation">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>基础信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图·-->

    <el-card class="box-card">
      <section>
        <div class="main-information">
          <div
            class="basic-information"
            style="padding-bottom: 0px; padding-top: 20px"
          >
            <div class="content">
              <div class="title">
                <span class="bar"></span>
                <span>基础信息</span>
              </div>
            </div>
          </div>
          <div class="card" v-show="!showEdit">
            <div class="left">
              <!-- <lable>你是谁？</lable> -->
              <label for="eName"
                ><span style="padding-right: 2px">*</span>姓名</label
              >
              <input
                v-model="name"
                type="text"
                name="name"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for="exStatus "
                ><span style="padding-right: 2px">*</span>当前求职状态</label
              >
              <input
                v-model="exStatus"
                type="text"
                name="exStatus"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for="phone"
                ><span style="padding-right: 2px">*</span>电话</label
              >
              <input
                v-model="phone"
                type="text"
                name="phone"
                required=""
                autocomplete="off"
                :class="choose"
              />

              <div></div>
            </div>
            <div class="right">
              <label for="yearMonth"
                ><span style="padding-right: 2px">*</span>出生年月</label
              >
              <input
                v-model="yearMonth"
                type="text"
                name="yearMonth"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for="gender"
                ><span style="padding-right: 2px">*</span>性别</label
              >
              <input
                v-model="gender"
                type="text"
                name="gender"
                required=""
                autocomplete="off"
                :class="choose"
              />

              <label for="email"
                ><span style="padding-right: 2px">*</span>邮箱</label
              >
              <input
                v-model="email"
                type="text"
                name="email"
                required=""
                autocomplete="off"
                class="main-input"
              />
              <div>
                <el-button
                  v-show="!showEdit"
                  class="main-button"
                  @click="editMainInfo"
                >
                  <div class="big-one">
                    <div class="icon-box">
                      <span class="icon-edict">
                        <span class="icon"></span>
                        <span>编辑</span>
                      </span>
                    </div>
                  </div>
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 以下是信息编辑 -->
        <div class="main-information" v-show="showEdit">
          <div
            class="add"
            v-show="showEdit"
            style="background: rgb(248, 249, 251)"
          >
            <div class="add-title">编辑基本信息</div>
          </div>
          <div class="card">
            <div class="left">
              <!-- <lable>你是谁？</lable> -->
              <label for="eName"
                ><span style="padding-right: 2px">*</span>姓名</label
              >
              <input
                v-model="eName"
                type="text"
                name="eName"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for="eExStatus "
                ><span style="padding-right: 2px">*</span>当前求职状态</label
              >
              <div class="like-input">
                <el-form
                  style="
                    dispaly: inline-block;
                    width: 100%;
                    margin-bottom: 20px;
                  "
                >
                  <el-select
                    v-model="eExStatus"
                    placeholder="请选择您的职位"
                    style="display: inline-block; width: 100%"
                  >
                    <el-option
                      label=" 离校-随时到岗"
                      value="离校-随时到岗"
                    ></el-option>
                    <el-option
                      label="离校-月内到岗"
                      value="离校-考月内到岗"
                    ></el-option>
                    <el-option
                      label="离校-暂不考虑"
                      value="离校-暂不考虑"
                    ></el-option>

                    <el-option
                      label="在校-随时到岗"
                      value="在校-随时到岗"
                    ></el-option>

                    <el-option
                      label="在校-月内到岗"
                      value="在校-月内到岗"
                    ></el-option>
                    <el-option
                      label="在校-暂不考虑"
                      value="在校-暂不考虑"
                    ></el-option>
                  </el-select>
                </el-form>
              </div>
              <label for="ePhone"
                ><span style="padding-right: 2px">*</span>电话</label
              >
              <input
                v-model="ePhone"
                type="text"
                name="ePhone"
                required=""
                autocomplete="off"
                :class="choose"
              />

              <div></div>
            </div>
            <div class="right">
              <label for="eYearMonth"
                ><span style="padding-right: 2px">*</span>出生年月</label
              >

              <div class="like-input" style="padding-left: 0; border: none">
                <el-date-picker
                  style="
                    display: inline-block;
                    width: 100%;
                    font-size: 16px;
                    color: #414a60;
                  "
                  v-model="eYearMonth"
                  type="month"
                  placeholder="选择月"
                  value-format="yyyy-MM"
                >
                  >
                </el-date-picker>
              </div>
              <label for="eGender"
                ><span style="padding-right: 2px">*</span>性别</label
              >
              <!-- <input
                v-model="eGender"
                type="text"
                name="eGender"
                required=""
                autocomplete="off"
                :class="choose"
              /> -->
              <el-form ref="form" label-width="0px" class="like-input">
                <el-form-item style="width: 100%">
                  <el-radio-group
                    v-model="eGender"
                    style="
                      display: flex;
                      width: 100%;
                      justify-content: space-around;
                    "
                  >
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>

              <label for="email"
                ><span style="padding-right: 2px">*</span>邮箱</label
              >
              <input
                v-model="email"
                type="text"
                name="email"
                required=""
                autocomplete="off"
                class="main-input"
              />
              <div>
                <el-button
                  v-show="!showEdit"
                  class="main-button"
                  @click="editMainInfo"
                >
                  <div class="big-one">
                    <div class="icon-box">
                      <span class="icon-edict">
                        <span class="icon"></span>
                        <span>编辑</span>
                      </span>
                    </div>
                  </div>
                </el-button>
                <!-- button部分 -->
                <div class="button" v-show="showEdit">
                  <div class="button-box">
                    <el-button
                      style="margin-top: 12px; float: right"
                      @click="finishEdit"
                      >完成</el-button
                    >
                    <span
                      style="
                        display: inline-block;
                        float: right;
                        width: 19px;
                        height: 10px;
                      "
                    ></span>
                    <el-button
                      style="margin-top: 12px; float: right"
                      @click="cancelEditMainInfo"
                      >取消</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 以下是基础信息 -->

        <div class="basic-information">
          <div class="content">
            <div class="title">
              <span class="bar"></span>
              <span>期望职位</span>
            </div>
            <!-- 期望职位 -->
            <div class="inside-content" v-show="showExPosition">
              <div class="big-one">
                <div class="normal">
                  {{ exPosition }}
                  <div class="icon-box">
                    <span class="icon-edict" @click="editExPosition">
                      <span class="icon"></span>
                      <span>编辑</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 编辑期望职位 -->
          <div class="add" v-show="!showExPosition">
            <div class="add-title" style="margin-bottom: 10px">
              编辑期望职位
            </div>
            <div class="long">
              <div class="all">
                <!-- <label for="exStatus "
                  ><span style="padding-right: 2px">*</span>优势</label
                > -->
                <textarea
                  v-model="eExPosition"
                  type="text"
                  name="eExPosition"
                  required=""
                  autocomplete="off"
                  placeholder="请输入您期望的职位"
                />
              </div>
            </div>
            <div class="button">
              <div class="button-box">
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="finishExPosition"
                  >完成</el-button
                >
                <span
                  style="
                    display: inline-block;
                    float: right;
                    width: 19px;
                    height: 10px;
                  "
                ></span>
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="editExPosition"
                  >取消</el-button
                >
              </div>
            </div>
          </div>

          <!-- 个人优势 -->
          <div class="content">
            <div class="title">
              <span class="bar"></span>
              <span>个人优势</span>
            </div>
            <div class="inside-content" v-show="showAdvantage">
              <div class="big-one">
                <div class="normal">
                  {{ advantage }}
                  <div class="icon-box">
                    <span class="icon-edict" @click="editAdvantage">
                      <span class="icon"></span>
                      <span>编辑</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 编辑个人优势 -->

          <div class="add" v-show="!showAdvantage">
            <div class="add-title" style="margin-bottom: 10px">
              编辑个人优势
            </div>
            <div class="long">
              <div class="all">
                <!-- <label for="exStatus "
                  ><span style="padding-right: 2px">*</span>优势</label
                > -->
                <textarea
                  v-model="eAdvantage"
                  type="text"
                  name="eAdvantage"
                  required=""
                  autocomplete="off"
                  placeholder="请输入您的个人优势"
                />
              </div>
            </div>
            <div class="button">
              <div class="button-box">
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="finishAdvantage"
                  >完成</el-button
                >
                <span
                  style="
                    display: inline-block;
                    float: right;
                    width: 19px;
                    height: 10px;
                  "
                ></span>
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="editAdvantage"
                  >取消</el-button
                >
              </div>
            </div>
          </div>

          <!-- 教育经历 -->
          <div class="content">
            <div class="title">
              <span class="bar"></span>
              <span>教育经历</span>
            </div>
            <div class="inside-content" v-show="showEducationEx">
              <div class="big-one" >
                  {{ school }}
                <span class='time' >{{startTime}}</span>
                <span>-</span>
                <span class='time' >{{endTime}}</span>
                <div class="icon-box">
                  <span class="icon-delete">
                    <span class="icon"></span>
                    <span>删除</span>
                  </span>
                  <span class="icon-edict" @click="editEducationEx">
                    <span class="icon"></span>
                    <span>编辑</span>
                  </span>
                </div>
              </div>
              <div class="big-one">
                {{ major }}
                <span class="dividing-line"></span>
                <span>{{ education }}</span>
              </div>
              <!-- 技巧 -->
              <div class="normal">{{ skill }}</div>
            </div>
          </div>
          <!-- 编辑教育经历 -->
          <div class="add" v-show="!showEducationEx">
            <div class="add-title">编辑教育经历</div>

            <div class="card" style="padding-top: 2px">
              <div class="left">
                <!-- <lable>你是谁？</lable> -->
                <label for="eSchool"
                  ><span style="padding-right: 2px">*</span>学校</label
                >
                <input
                  v-model="eSchool"
                  type="text"
                  name="eSchool"
                  required=""
                  autocomplete="off"
                  class="input"
                />
                <label for="eMajor"
                  ><span style="padding-right: 2px">*</span>专业</label
                >
                <input
                  v-model="eMajor"
                  type="text"
                  name="eMajor"
                  required=""
                  autocomplete="off"
                  class="input"
                />
              </div>
              <div class="right">
                <label for="eEducation"
                  ><span style="padding-right: 2px">*</span>学历</label
                >
                <div class="like-input">
                  <el-form
                    style="
                      dispaly: inline-block;
                      width: 100%;
                      margin-bottom: 20px;
                    "
                  >
                    <el-select
                      v-model="eEducation"
                      placeholder="请选择您的学历"
                      style="display: inline-block; width: 100%; border: none"
                    >
                      <el-option label="专科以下" value="专科以下"></el-option>
                      <el-option label="专科" value="专科"></el-option>
                      <el-option label="本科" value="本科"></el-option>

                      <el-option
                        label="硕士研究生"
                        value="硕士研究生"
                      ></el-option>
                      <el-option
                        label="博士研究生"
                        value="博士研究生"
                      ></el-option>
                    </el-select>
                  </el-form>
                </div>
                <!-- 入学时间 -->
                <label for="schoolTime"
                  ><span style="padding-right: 2px">*</span>就读时间</label
                >
                <div class="two-input">
                  <el-date-picker
                    style="
                      display: inline-block;
                      width: 48%;
                      font-size: 20px;
                      color: #414a60;
                    "
                    v-model="eStartTime"
                    type="month"
                    placeholder="选择入职时间"
                    value-format="yyyy.MM"
                  >
                    >
                  </el-date-picker>
                  <span style="line-height: 38px">-</span>
                  <el-date-picker
                    style="
                      display: inline-block;
                      width: 48%;
                      font-size: 20px;
                      color: #414a60;
                    "
                    v-model="eEndTime"
                    type="month"
                    placeholder="选择离职时间"
                    value-format="yyyy.MM"
                  >
                    >
                  </el-date-picker>
                </div>
              </div>
            </div>
            <!-- 长内容 -->
            <div class="long">
              <div class="all">
                <label for="exStatus "
                  ><span style="padding-right: 2px">*</span>技能</label
                >
                <textarea
                  v-model="eSkill"
                  type="text"
                  name="eSkill"
                  required=""
                  autocomplete="off"
                  placeholder="请输入您的技能"
                />
              </div>
            </div>
            <div class="button">
              <div class="button-box">
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="finishEducationEx"
                  >完成</el-button
                >
                <span
                  style="
                    display: inline-block;
                    float: right;
                    width: 19px;
                    height: 10px;
                  "
                ></span>
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="editEducationEx"
                  >取消</el-button
                >
              </div>
            </div>
          </div>

          <!-- 实习经历 -->
          <div class="content">
            <div class="title">
              <span class="bar"></span>
              <span>实习经历</span>
            </div>
            <div class="inside-content" v-show="showInternshipEx">
              <div class="big-one">
                {{ comName }}
                 <span class='time' >{{workStart}}</span>
                <span>-</span>
                <span class='time' >{{workEnd}}</span>
                <div class="icon-box">
                  <span class="icon-delete">
                    <span class="icon"></span>
                    <span>删除</span>
                  </span>
                  <span class="icon-edict">
                    <span class="icon"></span>
                    <span @click="editInternshipEx">编辑</span>
                  </span>
                </div>
              </div>
              <div class="big-one">
                {{ industry }}
                <span class="dividing-line"></span>
                <span>{{ position }}</span>
              </div>
              <div class="big-one">
                工作内容：
                <span class="normal">{{ workContent }}</span>
              </div>
            </div>
          </div>
          <!-- 编辑实习经历 -->
          <div class="add" v-show="!showInternshipEx">
            <div class="add-title">编辑实习经历</div>

            <div class="card" style="padding-top: 2px">
              <div class="left">
                <!-- <lable>你是谁？</lable> -->
                <label for="eComName"
                  ><span style="padding-right: 2px">*</span>公司名称</label
                >
                <input
                  v-model="eComName"
                  type="text"
                  name="eComName"
                  required=""
                  autocomplete="off"
                  class="input"
                />
                <label for="ePosition"
                  ><span style="padding-right: 2px">*</span>职位名称</label
                >
                <input
                  v-model="ePosition"
                  type="text"
                  name="ePosition"
                  required=""
                  autocomplete="off"
                  class="input"
                />
              </div>
              <div class="right">
                <label for="eIndustry"
                  ><span style="padding-right: 2px">*</span>所属行业</label
                >
                <input
                  v-model="eIndustry"
                  type="text"
                  name="eIndustry"
                  required=""
                  autocomplete="off"
                  class="input"
                />
                <label for="exStatus "
                  ><span style="padding-right: 2px">*</span>工作/实习时间</label
                >
                <div class="two-input">
                  <el-date-picker
                    style="
                      display: inline-block;
                      width: 48%;
                      font-size: 20px;
                      color: #414a60;
                    "
                    v-model="eWorkStart"
                    type="month"
                    placeholder="选择入职时间"
                    value-format="yyyy-MM"
                  >
                    >
                  </el-date-picker>
                  <span style="line-height: 38px">-</span>
                  <el-date-picker
                    style="
                      display: inline-block;
                      width: 48%;
                      font-size: 20px;
                      color: #414a60;
                    "
                    v-model="eWorkEnd"
                    type="month"
                    placeholder="选择离职时间"
                    value-format="yyyy-MM"
                  >
                    >
                  </el-date-picker>
                </div>
              </div>
            </div>
            <!-- 长内容 -->
            <div class="long">
              <div class="all">
                <label for="eWorkContent"
                  ><span style="padding-right: 2px">*</span>工作内容</label
                >
                <textarea
                  v-model="eWorkContent"
                  type="text"
                  name="eWorkContent"
                  required=""
                  autocomplete="off"
                  placeholder="请输入您的工作内容"
                />
              </div>
            </div>
            <div class="button">
              <div class="button-box">
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="finishInternshipEx"
                  >完成</el-button
                >
                <span
                  style="
                    display: inline-block;
                    float: right;
                    width: 19px;
                    height: 10px;
                  "
                ></span>
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="editInternshipEx"
                  >取消</el-button
                >
              </div>
            </div>
          </div>

          <!-- 项目经历 -->
          <div class="content">
            <div class="title">
              <span class="bar"></span>
              <span>项目经历</span>
            </div>
            <div class="inside-content" v-show="showProjectEx">
              <div class="big-one">
                {{ projectName }}
                <div class="icon-box">
                  <span class="icon-delete">
                    <span class="icon"></span>
                    <span>删除</span>
                  </span>
                  <span class="icon-edict">
                    <span class="icon"></span>
                    <span @click="editProjectEx">编辑</span>
                  </span>
                </div>
              </div>
              <div class="big-one">{{ projectContent }}</div>
              <div class="big-one">
                项目描述：
                <span class="normal">{{ projectEx }}</span>
              </div>
            </div>
          </div>
          <!-- 添加项目经历 -->
          <div class="add" v-show="!showProjectEx">
            <div class="add-title">添加项目经历</div>
            <div class="card" style="padding-top: 2px">
              <div class="left">
                <label for="eProjectName"
                  ><span style="padding-right: 2px">*</span>项目名称</label
                >
                <input
                  v-model="eProjectName"
                  type="text"
                  name="eProjectName"
                  required=""
                  autocomplete="off"
                  class="input"
                />
                <label for="eProjectContent"
                  ><span style="padding-right: 2px">*</span>负责项目内容</label
                >
                <input
                  v-model="eProjectContent"
                  type="text"
                  name="eProjectContent"
                  required=""
                  autocomplete="off"
                  class="input"
                />
              </div>
              <div class="right">
                
              </div>
            </div>
            <!-- 长内容 -->
            <div class="long">
              <div class="all">
                <label for="eProjectEx"
                  ><span style="padding-right: 2px">*</span>项目描述</label
                >
                <textarea
                  v-model="eProjectEx"
                  type="text"
                  name="eProjectName"
                  required=""
                  autocomplete="off"
                  placeholder="描述该项目，向招聘者展示您的项目经验例如:
                      1、项目概述...2、人员分工...3、我的分工...
                                                    "
                />
              </div>
            </div>
            <div class="button">
              <div class="button-box">
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="finishProjectEx"
                  >完成</el-button
                >
                <span
                  style="
                    display: inline-block;
                    float: right;
                    width: 19px;
                    height: 10px;
                  "
                ></span>
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="editProjectEx"
                  >取消</el-button
                >
              </div>
            </div>
          </div>

          <div class="content">
            <div class="title">
              <span class="bar"></span>
              <span>所获证书</span>
            </div>
            <div class="inside-content" v-show="showCertification">
              <div class="big-one">
                {{ certification }}

                <div class="icon-box">
                  <span class="icon-edict" @click="editCertification">
                    <span class="icon"></span>
                    <span>编辑</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 编辑证书 -->

          <div class="add" v-show="!showCertification">
            <div class="add-title" style="margin-bottom: 10px">
              编辑所获证书
            </div>
            <div class="card" style="padding-top: 2px">
              <div class="left" >
                <!-- <lable>你是谁？</lable> -->
                <label for="eComName"
                  ><span style="padding-right: 2px">*</span>证书名称</label
                >
                <div class="like-input" style="padding-left: 0; border: none">
                  <el-date-picker
                    style="
                      display: inline-block;
                      width: 100%;
                      font-size: 16px;
                      color: #414a60;
                    "
                    v-model="eObtainTime"
                    type="month"
                    placeholder="选择获取时间"
                    value-format="yyyy-MM"
                  >
                    >
                  </el-date-picker>
                </div>
                
              </div>
              <div class='right'></div>
            </div>
            <div class="long">
              <div class="all">
                <!-- <label for="exStatus "
                  ><span style="padding-right: 2px">*</span>优势</label
                > -->
                <textarea
                  v-model="eCertification"
                  type="text"
                  name="eCertification"
                  required=""
                  autocomplete="off"
                  placeholder="请输入您所获的证书名称"
                />
              </div>
            </div>
            <div class="button">
              <div class="button-box">
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="finishCertification"
                  >完成</el-button
                >
                <span
                  style="
                    display: inline-block;
                    float: right;
                    width: 19px;
                    height: 10px;
                  "
                ></span>
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="editCertification"
                  >取消</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </section>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: " Alan",
      info: [],
      gender: "女",
      email: "",
      phone: "12",
       exPosition: "前端构架师",
      exStatus: "在校-随时到岗",
      yearMonth: "2001-08",
     
      advantage: "善于学习",
      education: "本科",
      major: "计算机",
      skill: "vue",
      school: "川师",
      startTime: "2017.6",
      endTime: "2021.6",
      comName: "小猿公司",
     
      workEnd:"2021.6",
      workStart:"2020.6",
      position: "前构架师",
      industry: "互联网行业",
      workContent: "学习",
      certification: "互联网一等奖",
      projectEx: "写代码，，，，，，，，，，，，，，",
      projectContent: "代码",
      projectName: "html",
      // 更改内容
      eName: "",
      eGender: "",
      ePhone: "",
      eExStatus: "",
      eYearMonth: "",
      ePersonName: "",
      eYeaMonth: "",
      eExPosition: "",
      eAdvantage: "",
      eEducation: "",
      eMajor: "",
      eSkill: "",
      eSchool: "",
      eStartTime: "",
      eEndTime: "",
      eComName: "",
      ePosition: "",
      eIndustry: "",
      eWorkContent: "",
      eWorkEnd: "",
      eWorkStart: "",
      eCertification: "",
      eProjectEx: "",
      eProjectContent: "",
      eProjectName: "",
      eObtainTime:'',

      // 基础信息选择
      showEdit: false,
      choose: "main-input",
      // 实习经历
      showInternshipEx: true,
      //项目经历
      showProjectEx: true,
      showEducationEx: true,
      showAdvantage: true,
      showExPosition: true,
      //证书
      showCertification: true,
    };
  },
  mounted() {
    // console.log(this.choose);
  },
  methods: {
    // 点击编辑
    editMainInfo() {
      this.choose = "edit-input";
      this.showEdit = true;
      this.eName = this.name;
      this.eYearMonth = this.yearMonth;
      this.eGender = this.gender;
      this.ePhone = this.phone;
      this.eExStatus = this.exStatus;
    },
    // 完成编辑
    finishEdit() {
      this.name = this.eName;
      this.phone = this.ePhone;
      // console.log('ephone'+this.ePhone+'phone:'+this.ePhone);
      this.gender = this.eGender;
      this.exStatus = this.eExStatus;
      this.yearMonth = this.eYearMonth;

      this.choose = "main-input";
      this.showEdit = false;
    },
    cancelEditMainInfo() {
      this.choose = "main-input";
      this.showEdit = false;
    },
    editInternshipEx() {
      this.showInternshipEx = !this.showInternshipEx;
      this.ePosition = this.position;
      this.eIndustry = this.industry;
      this.eWorkContent = this.workContent;
      this.eComName = this.comName;
       this.eWorkStart=this.workStart ;
       this.eWorkEnd=this.workEnd;
     
    },
    finishInternshipEx() {
      this.showInternshipEx = !this.showInternshipEx;
      this.position = this.ePosition;
      this.industry = this.eIndustry;
      this.workContent = this.eWorkContent;
      this.comName = this.eComName;
        this.workStart = this.eWorkStart;
      this.workEnd = this.eWorkEnd;
      
    },
    editProjectEx() {
      this.showProjectEx = !this.showProjectEx;
      this.eProjectEx = this.projectEx;
      this.eProjectContent = this.projectContent;
      this.eProjectName = this.projectName;
    },
    finishProjectEx() {
      this.showProjectEx = !this.showProjectEx;
      this.projectEx = this.eProjectEx;
      this.projectContent = this.eProjectContent;
      this.projectName = this.eProjectName;
      this.school = this.eSchool;
    },
    editEducationEx() {
      this.showEducationEx = !this.showEducationEx;
      this.eEducation = this.education;
      this.eMajor = this.major;
      this.eSkill = this.skill;
      this.eSchool = this.school;
         this.eStartTime=this.startTime;
       this.eEndTime=this.endTime;
        
    
    },
    finishEducationEx() {
      this.showEducationEx = !this.showEducationEx;
      this.education = this.eEducation;
      this.major = this.eMajor;
      this.skill = this.eSkill;
      this.school = this.eSchool;
      
      
      this.startTime = this.eStartTime;
      this.endTime = this.eEndTime;
     
    },
    editAdvantage() {
      this.showAdvantage = !this.showAdvantage;
      this.eAdvantage = this.advantage;
    },
    finishAdvantage() {
      this.showAdvantage = !this.showAdvantage;
      this.advantage = this.eAdvantage;
    },
    editExPosition() {
      this.showExPosition = !this.showExPosition;
      this.eExPosition = this.exPosition;
    },
    finishExPosition() {
      this.showExPosition = !this.showExPosition;
      this.exPosition = this.eExPosition;
    },
    //证书\
    editCertification() {
      this.showCertification = !this.showCertification;
      this.eCertification = this.certification;
    },
    finishCertification() {
      this.showCertification = !this.showCertification;
      this.certification = this.eCertification;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-card__body {
  padding-left: 0;
  padding-right: 0;
}
/deep/ .el-form-item__content {
  margin-left: 0;
}
/deep/ .el-input__inner {
  font-size: 15px;
  color: #414a60;
  padding-left: 0;
  border-radius: 5px;
}
.box-card {
  .card {
    width: 100%;
    display: flex;
    padding-top: 20px;
    flex-direction: row;
    background: rgb(248, 249, 251);
    justify-content: center;
    height: auto;
    .left {
      padding: 0px 0px 20px 0;
      // 保持间距
      margin-right: 10%;
      width: 35%;
      height: auto;
      //  background: red;
      display: flex;
      flex-direction: column;
      // border-right: 1px solid black;
      // border-left: 1px solid black;
      label {
        padding: 10px 0px 10px 0;
      }
      input {
        display: inline-block;
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 5px;
        margin-bottom: 20px;
        font-size: 14px;
        border: 1px solid #e3e7ed;
        outline: none;

        border-radius: 5px;
        color: #414a60;
        background-color: #fff;

        font-size: 17px;
        // transition: border .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out;
        // 无法输入
        // pointer-events: none;
        box-sizing: border-box;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;
      }
      input:hover {
        border: 1px solid rgba(76, 108, 154, 1);
        box-shadow: 0px 1px 5px rgba(158, 178, 210);
      }

      .main-input {
        pointer-events: none;
      }
      .edit-input {
        pointer-events: auto;
      }
    }

    .right {
      padding: 0px 0 20px 0;
      width: 35%;
      height: auto;
      // border-left: 1px solid black;
      //  border-right: 1px solid black;
      // background: blue;
      display: flex;
      flex-direction: column;

      label {
        padding: 10px 0px 10px 0;
      }
      input {
        display: inline-block;
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 5px;
        margin-bottom: 20px;
        font-size: 14px;
        border: 1px solid #e3e7ed;
        outline: none;

        border-radius: 5px;
        color: #414a60;
        background-color: #fff;

        font-size: 17px;
        // transition: border .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out;
        // 无法输入
        // pointer-events: none;
        box-sizing: border-box;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;
      }
      input:hover {
        border: 1px solid rgba(76, 108, 154, 1);
        box-shadow: 0px 1px 5px rgba(158, 178, 210);
      }
      .two-input {
        display: flex;
        justify-content: space-between;
        width: 100%;
      }
      .like-input {
        display: flex;
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 0px;
        margin-bottom: 20px;
        font-size: 14px;
        border: 1px solid #e3e7ed;
        outline: none;
        border-radius: 5px;
        color: #414a60;
        background-color: #fff;
        border: none;
        font-size: 17px;
      }
      // .like-input:hover {
      //   border: 1px solid rgba(76, 108, 154, 1);
      //   box-shadow: 0px 1px 5px rgba(158, 178, 210);
      // }
      .main-input {
        pointer-events: none;
      }
      .edit-input {
        pointer-events: auto;
      }

      .main-button {
        margin-top: 12px;
        display: online-block;
        width: 100px;
        height: auto;
        float: right;
        &:hover {
          .card & {
            background: red;
          }
        }
      }
    }
    // border-bottom: 2px solid rgba(76, 108, 154, 1);
    // border-image:  -webkit-linear-gradient(transparent,rgba(76, 108, 154, 1), transparent) 1 1;
    // background-image:linear-gradient(45deg, #000,#fff);
  }

  .add {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .add-title {
      padding-top: 20px;
      width: 80%;
      font-size: 18px;
      font-weight: bold;
      color: rgba(76, 108, 154, 1);
    }
    .long {
      width: 100%;
      display: flex;
      justify-content: center;
      .all {
        width: 80%;
        display: flex;
        flex-direction: column;
        label {
          padding: 10px 0px 10px 0;
        }
        textarea {
          display: inline-block;
          width: 100%;
          min-height: 60px;
          line-height: 38px;
          padding-left: 5px;
          margin-bottom: 20px;
          font-size: 14px;
          border: 1px solid #e3e7ed;
          outline: none;

          border-radius: 5px;
          color: #414a60;
          background-color: #fff;

          font-size: 17px;
          // transition: border .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out;
        }
        input:hover {
          border: 1px solid rgba(76, 108, 154, 1);
          box-shadow: 0px 1px 5px rgba(158, 178, 210);
        }
      }
    }
    // 编辑完成按钮
    .button {
      width: 100%;
      display: flex;
      justify-content: center;
      .button-box {
        width: 75%;
      }
    }
  }
  .basic-information {
    padding: 0 60px 60px 60px;
    background: rgb(248, 249, 251);
    // background:red;
    // 分割线
    .title {
      display: flex;
      align-items: center;
      padding-top: 15px;
      font-weight: bold;
      font-size: 18px;
      font-weight: 400;
      .bar {
        width: 3px;
        height: 16px;
        background: rgba(76, 108, 154, 1);
        margin-right: 6px;
      }
    }
    .inside-content {
      // 原样式
      background: none;
      outline: none;
      border: none;
      letter-spacing: 1px;
      width: 100%;
      padding-top: 20px 0 10px 10px;
      padding-left: 10px;
      min-height: 30px;
      margin-top: 15px;
      line-height: 35px;
      color: #61687c;
      background: #fff;
      .big-one {
        font-size: 18px;
        font-weight: 545;
        color: rgba(76, 108, 154, 1);
        .time{
          //  transform:translate(0,-60px);
        //  vertical-align:top;
          font-size:12px;
          width:100%;
       letter-spacing:0.5px;

         
          color:rgb(117, 117, 117);
          // background:red;
        }
        .dividing-line {
          display: inline-block;
          width: 1.5px;
          height: 10px;
          background: #61687c;
          margin-right: 10px;
          margin-left: 10px;
        }
        .normal {
          color: #61687c;
          font-size: 16px;
        }
        .icon-box {
          float: right;
          display: flex;
          align-content: flex-end;
          padding-right: 15px;
          color: #1296db;
          font-size: 15px;
          cursor: pointer;

          .icon-delete {
            display: flex;
            align-content: center;
            margin-right: 5px;
            .icon {
              display: inline-block;
              padding: 0;
              height: 25px;
              width: 28px;
              background: url(../../assets/img/delete.png) no-repeat;
              background-size: cover;
              // background:red;
            }
          }
          .icon-delete:hover {
            background: rgba(242, 245, 249, 1);
          }
          .icon-edict {
            display: flex;
            align-content: center;

            .icon {
              display: inline-block;
              padding: 0;
              height: 25px;
              width: 28px;
              // background: url(../../assets/img/edict.png) no-repeat;
              // background-size: cover;
              background: url(../../assets/img/edict.png) no-repeat;
              background-size: cover;
              // background:red;
            }
          }
          .icon-edict:hover {
            background: rgba(242, 245, 249, 1);
          }
        }
      }
    }
    .inside-content:hover {
      background: rgba(242, 245, 249, 1);
    }
    .add {
      display: flex;
      flex-direction: column;
      align-content: center;
    }
  }
}
</style>
<style>
/* .el-card__body {
  padding-left:0;
  background:red;
} */
</style> 